import React, { useState, useEffect } from 'react';
import { Modal, Popconfirm, Form, Select } from 'antd';
import SlickTable from '@/components/SlickTable';

const { Option } = Select;

function EditRule({ visiable, close, form }) {
  // const [editing, setEditing] = useState(false);
  const { getFieldDecorator } = form;
  const [editingKey, setEditingKey] = useState('');

  const isEditing = record => {
    return record.id === editingKey;
  };

  const saveTable = record => {
    console.log(record);
  };

  const columns = [
    {
      title: '规则编码',
      dataIndex: 'id',
      ellipsis: true,
    },

    {
      title: '规则名称',
      dataIndex: 'assName',
      ellipsis: true,
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      ellipsis: true,
    },
    {
      title: '规则关系',
      dataIndex: 'relTypeName',
      width: 140,
      ellipsis: true,
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item style={{ marginBottom: 0 }}>
            {getFieldDecorator('relTypeName', {
              initialValue: record.relType,
            })(
              <Select placeholder="请选择组织" style={{ width: 120 }}>
                <Option value="1">并行</Option>
                <Option value="2">依赖</Option>
                <Option value="3">互斥</Option>
                <Option value="4">全部互斥</Option>
              </Select>
            )}
          </Form.Item>
        ) : (
          `${record.relTypeName}`
        );
      },
    },
    {
      title: '关系值',
      dataIndex: 'ruleRel',
      ellipsis: true,
    },
    {
      title: '执行方式',
      dataIndex: 'autoExeName',
      ellipsis: true,
    },
    {
      title: '操作',
      width: 100,
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <>
            <a
              onClick={() => {
                saveTable(record);
              }}
              style={{ marginRight: 8 }}
            >
              保存
            </a>

            <Popconfirm
              title="你确定要取消吗"
              onConfirm={() => {
                setEditingKey('');
              }}
            >
              <a>取消</a>
            </Popconfirm>
          </>
        ) : (
          <a
            disabled={editingKey !== ''}
            onClick={() => {
              setEditingKey(record.id);
            }}
          >
            编辑
          </a>
        );
      },
    },
  ];

  return (
    <Modal
      title="编辑规则关系"
      width="800px"
      destroyOnClose
      visible={visiable}
      footer={null}
      onCancel={close}
    >
      <div style={{ minHeight: 300 }}>
        <SlickTable
          rowKey={record => record.id}
          columns={columns}
          pagination={false}
          dataSource={[
            {
              id: 2902,
              assName: '下一步',
              priority: 1,
              relTypeName: '并行',
              relType: '1',
              ruleRel: '',
              autoExeName: '手动',
            },
            {
              id: 2903,
              assName: '上一步',
              priority: 1,
              relTypeName: '依赖',
              relType: '2',
              ruleRel: '',
              autoExeName: '自动',
            },
          ]}
        />
      </div>
    </Modal>
  );
}

export default Form.create()(EditRule);
